<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>基本列表</title>
	<!-- 引入vue开发环境版本 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
	<div id="root">
		<h2>搜索</h2>
		<input type="text" placeholder="请输入你要搜索的关键字" v-model="keywords">
        <button @click="srotType=1">年龄升序</button>
        <button @click="srotType=2">年龄降序</button>
        <button @click="srotType=0">原顺序</button>
		<ul>
			<li v-for="(p,index) of filterPerons" :key="index">
				{{p.name}}-{{p.age}}-{{p.age}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		new Vue({
			el: '#root',
			data: {
				keywords: "",
                srotType:0, //0代表的是原顺序 1代表的是升序 2代表的是降序
				persons: [
					{ id: '001', name: '马冬梅', age: 18 },
					{ id: '002', name: '周冬雨', age: 19 },
					{ id: '003', name: '周杰伦', age: 20 },
					{ id: '004', name: '温兆伦', age: 21 }
				],
			},
			computed: {
				filterPerons() {
					const arr = this.persons.filter((p)=>{
						return p.name.indexOf(this.keywords) !==-1
					})
                
                    //判断一下是否需要进行排序
                    //根据sortType来进行判断是否要进行排序
                    if(this.srotType){
                       arr.sort((p1,p2)=>{
                           return this.srotType == 1?p1.age-p2.age:p2.age-p1.age;
                       })
                    }
                    return arr;
				}
			},
		})

	</script>
</html>